import React from "react";
import ProForm, { ProFormText } from "@ant-design/pro-form";
import { message, Modal } from "antd";
import { addUser } from "@/services/user"

const AddUser: React.FC = (props) => {
  const { isModalVisible, actionRef, setModalStatus } = props;

  const onAddUser = async (values) => {
    const rep = await addUser(values);
    if (rep.status === undefined) {
      message.success("添加成功");

      // 刷新表格数据(由 ant-pro-components 提供)
      actionRef.current.reload();

      // 关闭模态框
      setModalStatus(false)
    }
  }

  return (
    <Modal
      title="添加用户"
      visible={isModalVisible}
      footer={null}
      onCancel={() => { setModalStatus(false) }}
      destroyOnClose={true}
    >
      <ProForm
        onFinish={values => onAddUser(values)}
      >
        <ProFormText
          name="name"
          label="昵称"
          placeholder="请输入昵称"
          rules={[{ required: true, message: "昵称为必填项" }]}
        />
        <ProFormText
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          rules={[
            {
              required: true,
              message: '邮箱必填项',
            },
            {
              type: 'email',
              message: '请输入正确的邮箱格式'
            }
          ]}
        />
        <ProFormText.Password
          name="password"
          label="密码"
          placeholder="请输入密码"
          rules={[
            {
              required: true,
              message: '密码必填项',
            },
            {
              min: 6,
              message: '密码最少是6位字符',
            },
            {
              max: 16,
              message: '密码最多是16位字符',
            },
          ]}
        />
      </ProForm>
    </Modal >
  )
};

export default AddUser;
